import React, {useReducer} from 'react';
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";
import {changeIsRequired,addTodo,deleteTodo,allIsRequiredChange,deleteSelected} from './apis'
import './App.css'

const reducer = function (preState,{type,payload}) {
    switch (type) {
        case 'CHECKED':
            return changeIsRequired(preState,payload)
        case 'ADD':
            return addTodo(preState,payload)
        case 'DELETE':
            return deleteTodo(preState,payload)
        case 'ALL_CHANGE':
            return allIsRequiredChange(preState,payload)
        case 'DELETE_SELECTED':
            return deleteSelected(preState)
        default:
            return preState
    }
}

function App() {
    const [todoList,dispatch] = useReducer(reducer,
        localStorage.getItem('todoList')? JSON.parse(localStorage.getItem('todoList')):[])

    return (
        <>
            <div className={'todo-container'}>
                <div className={'todo-wrap'}>
                    <TodoHeader todoList={todoList} dispatch={dispatch}/>
                    <TodoMain todoList={todoList} dispatch={dispatch}/>
                    <TodoFooter todoList={todoList} dispatch={dispatch}/>
                </div>
            </div>
        </>

    );
}

export default App;